<template>
  <div>
    <div class="query-form">
      <el-form :inline="true" ref="queryForm" :model="queryForm">
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            placeholder="请输入部门名称"
            v-model="queryForm.deptName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleOpen" v-has="'dept-create'">创建</el-button>
      </div>
      <el-table :data="deptList" row-key="_id" :tree-props="{}" stripe>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          v-bind="item"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)" v-has="'dept-edit'"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row._id)"
               v-has="'dept-delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        v-model="showModel"
        :title="action == 'create' ? '创建部门' : '编辑部们'"
        :before-close="handleAddClose"
      >
        <el-form
          ref="deptForm"
          :model="deptForm"
          :rules="rules"
          label-width="120px"
        >
          <el-form-item label="上级部门" prop="parentId">
            <el-cascader
              placeholder="请选择部门"
              v-model="deptForm.parentId"
              :options="deptList"
              :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
              clearable
              show-all-levels
            ></el-cascader>
          </el-form-item>
          <el-form-item label="部门名称" prop="deptName">
            <el-input
              placeholder="请输入部门名称"
              v-model="deptForm.deptName"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="userName">
            <el-select
              @change="handleUser"
              placeholder="请选择负责人"
              v-model="deptForm.userName"
            >
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.userName"
                :value="`${item.userId}/${item.userName}/${item.userEmail}`"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱" prop="userEmail">
            <el-input
              disabled
              placeholder="请输入邮箱"
              v-model="deptForm.userEmail"
            ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleAddClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import utils from "../../utils/utils";
export default {
  data() {
    return {
      queryForm: {
        deptName: "",
      },
      deptList: [],
      columns: [
        {
          label: "部门名称",
          prop: "deptName",
        },
        {
          label: "负责人",
          prop: "userName",
        },
        {
          label: "更新时间",
          prop: "updateTime",
          formatter(row, col, value) {
            return utils.formateDate(new Date(value));
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
          formatter(row, col, value) {
            return utils.formateDate(new Date(value));
          },
        },
      ],
      pager: {
        pageNum: 1,
        pageSize: 10,
      },
      action: "",
      showModel: false,
      userList: [],
      deptForm: {
        parentId:[null]
      },
      rules: {
        parentId: [
          {
            required: false,
            message: "请选择上级部门",
            trigger: "blur",
          },
        ],
        deptName: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请选择负责人",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getDeptList();
    this.getUsersAllList();
  },
  methods: {
    handleQuery() {
      this.getDeptList();
    },
    handleReset(form) {
      this.$refs[form].resetFields();
    },
    handleEdit(row) {
      this.action = "edit";
      this.showModel = true;
      this.$nextTick(() => {
        Object.assign(this.deptForm, row);
      });
      // this.deptForm = { ...row };
    },
    async handleDelete(_id) {
      this.action = "delete";
      let params = { _id, action: this.action };
      let res = await this.$api.deptOperate(params);
      this.$message.success("删除成功");
      this.getDeptList();
    },
    async getDeptList() {
      let list = await this.$api.getDeptList({
        ...this.queryForm,
        ...this.pager,
      });
      this.deptList = list;
    },
    handleOpen() {
      this.action = "create";
      this.showModel = true;
    },
    handleAddClose() {
      this.showModel = false;
      this.handleReset("deptForm");
    },
    handleConfirm() {
      this.$refs.deptForm.validate(async (valid) => {
        if (valid) {
          let params = { ...this.deptForm };
          delete params.userEmail;
          params.action = this.action;
          let res = await this.$api.deptOperate(params);
          this.$message.success("操作成功");
          this.handleReset("deptForm");
          this.showModel = false;
          this.getDeptList();
        }
      });
    },
    async getUsersAllList() {
      let list = await this.$api.getUsersAllList();
      this.userList = list;
    },
    handleUser(val) {
      const [userId, userName, userEmail] = val.split("/");
      Object.assign(this.deptForm, { userId, userName, userEmail });
    },
  },
};
</script>

<style>
</style>